
<form name="form" action="" method="POST" enctype="multipart/form-data">
<input type="hidden" name="imgPath" id="imgPath">
    <table cellpadding="0" cellspacing="0" border="1" class="tableForm" bordercolor="#666666" style="border-collapse:collapse"> 
        <thead> 
            <tr> 
                <th>Ajax File Upload</th> 
            </tr> 
        </thead> 
        <tbody>     
            <tr>
                <td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input" ></td></tr> 
            <tr> 
                <td>Please select a file and click Upload button</td>
            </tr>
            <tr>
            	<td height="200px"><div id="imgPrint">Image Print</div></td>
            </tr>
        </tbody> 
        <tfoot> 
            <tr> 
                <td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
            </tr> 
        </tfoot> 
    </table>
	
	<input type="submit">
</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="./AjaxFileUploaderV2.1/ajaxfileupload.js"></script> 
<script type="text/javascript"> 
     function ajaxFileUpload() { 
        $.ajaxFileUpload 
        ( 
            { 
                url:'dataProcess.php', 
                secureuri:false, 
                fileElementId:'fileToUpload', 
                dataType: 'json', 
                data:{name:'logan', id:'id'}, 
                success: function (data, status) 
                { 
                    if(typeof(data.error) != 'undefined') 
                    { 
                        if(data.error != '') 
                        { 
                            alert(data.error); 
                        }else 
                        { 
                            console.log(data);
//                             alert(data.msg);
                            var htmlStr = "<img src='"+data.path+"' width='200' />";
                            $("#imgPrint").html(htmlStr);
                            $("#imgPath").val(data.path);
                            
                        }
                    }
                }, 
                error: function (data, status, e) 
                { 
                    alert(e); 
                } 
            } 
        ) 
         
        return false;
    }
</script>